.kp_big_screen{
  width: 100%;
  height: 100%;
  padding:0 20px;
  .show{
    display: block;
  }
  .hide{
    display: none;
  }
  .dim{
    opacity: 0.3;
  }
  .hight{
    opacity: 1;
  }
  .kp_screen_top{
    width: 100%;
    height: 731px;
    position: relative;
    //border: 1px solid red;
    .kp_rank{
      float: left;
      width: 417px;
      height: 731px;
      background: url(../images/rank/rank_bg.png);
      background-size: cover;
      margin-top: -20px;
      position: relative;
      .rank_title{
        position: absolute;
        left:50%;
        -webkit-transform:translate(-50%) ;
        -moz-transform:translate(-50%) ;
        -ms-transform:translate(-50%) ;
        -o-transform:translate(-50%) ;
        transform:translate(-50%) ;
        top:60px;
        font-size:26px;
        color: #4bc1fe;
      }
      .rank_con{
        position: absolute;
        width: 360px;
        height: 281px;
        left:50%;
        -webkit-transform:translate(-50%) ;
        -moz-transform:translate(-50%) ;
        -ms-transform:translate(-50%) ;
        -o-transform:translate(-50%) ;
        transform:translate(-50%) ;
        top:105px;
        .polygon6{
        //position: relative;
        width: 100%;
        height: 100%;
        background-image: url(../images/rank/polygon6.png);
        background-size: cover;
        position: relative;



        //.polygon5{
        //  background: url(../images/rank/polygon5.png);
        //  background-size: cover;
        //  .polygon4{
        //    background: url(../images/rank/polygon4.png);
        //    background-size: cover;
        //    .polygon3{
        //      background: url(../images/rank/polygon3.png);
        //      background-size: cover;
        //      .polygon2{
        //        background: url(../images/rank/polygon2.png);
        //        background-size: cover;
        //        .polygon1{
        //          background: url(../images/rank/polygon1.png);
        //          background-size: cover;
        //          position: relative;
        //          .rank_books {
        //            width: 1.2rem;
        //            padding: 0;
        //            position: absolute;
        //            left:50%;
        //            top:50%;
        //            -webkit-transform: translate(-50%,-50%);
        //            img{
        //              width: 100%;
        //              position: absolute;
        //              left:0;
        //              top:0.25rem;
        //            }
        //          }
        //        }
        //
        //      }
        //
        //    }
        //
        //  }
        //
        //}
      }
        .polygon5,.polygon4,.polygon3,.polygon2,.polygon1,.rank_books{
          left:50%;
          top:50%;
          position: absolute;
          -webkit-transform:translate(-50%,-50%) ;
          -moz-transform:translate(-50%,-50%) ;
          -ms-transform:translate(-50%,-50%) ;
          -o-transform:translate(-50%,-50%) ;
          transform:translate(-50%,-50%) ;
      }
        .polygon5{
          width: 329px;
          height: 256px;
          background-image: url(../images/rank/polygon5.png);
          background-size: cover;
        }
        .polygon4{
          width: 299px;
          height: 233px;
          background-image: url(../images/rank/polygon4.png);
          background-size: cover;
        }
        .polygon3{
          width: 272px;
          height: 212px;
          background-image: url(../images/rank/polygon3.png);
          background-size: cover;
        }
        .polygon2{
          width: 245px;
          height: 191px;
          background-image: url(../images/rank/polygon2.png);
          background-size: cover;
        }
        .polygon1{
          width: 221px;
          height: 172px;
          background-image: url(../images/rank/polygon1.png);
          background-size: cover;
        }
        .rank_flag{
          position: absolute;
          width: 51px;
          height: 41px;
          color:#fff;
          font-size: 14px;
          line-height: 41px;
          text-align: center;
        }
        .flag_left_top{
          left:22%;
          top:5%;
          background-image: url(../images/rank/green_left.png);
          background-size: cover;
        }
        .flag_left_mid{
          left:4%;
          top:41%;
          background-image: url(../images/rank/green_left.png);
          background-size: cover;
        }
        .flag_left_bot{
          left:22%;
          bottom:5%;
          background-image: url(../images/rank/green_left.png);
          background-size: cover;
        }
        .flag_right_top{
          right:22%;
          top:5%;
          background-image: url(../images/rank/green_right.png);
          background-size: cover;
        }
        .flag_right_mid{
          right:4%;
          top:41%;
          background-image: url(../images/rank/green_right.png);
          background-size: cover;
        }
        .flag_right_bot{
          right:21%;
          bottom:5%;
          background-image: url(../images/rank/green_right.png);
          background-size: cover;
        }
        .rank_books{
          width: 115px;
          height: 133px;
          div{
            width: 100%;
            height: 100%;
          }
        }
      }
      .rank_des{
        position: absolute;
        width: 360px;
        height: 340px;
        left:30px;
        bottom: 10px;
        padding-top:8px;
        //border:1px solid red;
        .rank_des_pub{
          width: 360px;
          height: 46px;
          line-height: 46px;
          margin-bottom: 10px;
          //border:1px solid red;
          padding-left:15px;
          font-size: 18px;
          color:#9ca4b2;
          overflow: hidden;
          text-overflow:ellipsis;
          white-space: nowrap;
          .paiming{
            font-size: 12px;
            margin-right:30px;
            color:#fff;
          }
        }
      }
    }
    .kp_banner{
      float: left;
      width: 820px;
      height: 730px;
      //border:1px solid green;
      margin:0 30px;
      padding-top: 30px;
      .banner_header{
        position: relative;
        width: 100%;
        height: 80px;
        .left_bg{
          float: left;
          width: 204px;
          img{
            width: 100%;
          }
        }
        .right_bg{
          float: right;
          width: 204px;
          img{
            width: 100%;
          }
        }
        .header_logo{
          position: absolute;
          left: 50%;
          bottom:20%;
          -webkit-transform:translate(-50%);
          -moz-transform:translate(-50%);
          -ms-transform:translate(-50%);
          -o-transform:translate(-50%);
          transform:translate(-50%);
          width: 481px;
          img{
            width: 100%;
          }
        }
        p{
          position: absolute;
          top: 70%;
          left: 50%;
          -webkit-transform:translate(-50%);
          -moz-transform:translate(-50%);
          -ms-transform:translate(-50%);
          -o-transform:translate(-50%);
          transform:translate(-50%);
          font-size: 30px;
          color: #4bc1fe;
        }
      }
      .banner_con{
        width: 100%;
        height:600px;
        margin-top:20px;
        //border:1px solid red;
        .kp_line_title{
          position: relative;
          width:146px;
          margin-left:40px;
          margin-bottom: 20px;
          img{
            width: 100%;
          }
          .title_txt_top{
            position: absolute;
            width: 300px;
            font-size:6px;
            left:80px;
            top:2px;
            color:#2d6c8c;
          }
          .title_txt_bot{
            width: 300px;
            position: absolute;
            font-size: 28px;
            color: #4bc1fe;
            left:80px;
            top:20px;
          }
        }
        .banner_pic{
          width:100%;
          height:501px;
          margin-top:-10px;
          background-image: url(../images/banner/outer_border.png);
          background-size: cover;
          padding: 1.5% 3% 6% 13%;
          overflow: hidden;
          position: relative;
          .swiper-container {
            width: 657px;
            height: 415px;
            position: absolute;
            margin:auto;
            -webkit-border-radius:10% 0 10% 0 ;
            -moz-border-radius:10% 0 10% 0 ;
            border-radius:10% 0 10% 0 ;
            border:1px solid #50b4ea;
            .swiper-wrapper{
              width: 100%;
              height: 100%;
              .swiper-slide{
                width: 100%;
                height: 100%;
                text-align: center;
                overflow: hidden;
                display: -webkit-box;
                display: -ms-flexbox;
                display: -webkit-flex;
                display: flex;
                -webkit-box-pack: center;
                -ms-flex-pack: center;
                -webkit-justify-content: center;
                justify-content: center;
                -webkit-box-align: center;
                -ms-flex-align: center;
                -webkit-align-items: center;
                align-items: center;
                img{
                  width: 100%;
                  height: 100%;
                }

              }

            }

          }
          .banner_mid_bg{
            margin-top:30px;
            width: 657px;
            height: 420px;
            background: url(../images/banner/mid_border.png) no-repeat;
            background-size: 100%;
            position: relative;
            //#banner_mid_bg2{
            //  width: 100%;
            //  height: 100%;
            //  position: absolute;
            //  left:0;
            //  top:14%;
            //
            //}

          }
          .banner_run{
            width: 100%;
            overflow: hidden;
            padding-left:20px;
            margin-top:-3%;
            ul{
              li{
                float: left;
                list-style: none;
                width:6px;
                margin-right:5px;
                img{
                  width: 100%;
                }
              }
            }
          }
          .lamp_line{
            width: 556px;
            position: absolute;
            left:13%;
            bottom:30px;
            img{
              width: 100%;
            }
          }
        }
      }
    }
    .kp_borrow{
      float: left;
      width: 570px;
      height: 660px;
      padding-top: 30px;
      //border:1px solid yellow;
      .kp_date{
        color:#408fba;
        margin-bottom: 20px;
        .kp_weather{
          float: left;
          font-size: 20px;
          margin-right: 20px;
          margin-left:40px;
        }
        .kp_time{
          float: left;
          #kp_clock{
            font-size: 20px;
          }
          #kp_t{
            #t_h,#t_m{
              font-size:40px;
              font-weight: 700;
            }
            #t_s{
              font-size: 20px;
              font-weight: 700;
            }
            #t_current{
              font-size:10px;
            }
          }
        }
      }
      .kp_line_title{
        position: relative;
        width:146px;
        margin-left:40px;
        margin-bottom: 20px;
        img{
          width: 100%;
        }
        .title_txt_top{
          position: absolute;
          width: 300px;
          font-size:6px;
          left:80px;
          top:2px;
          color:#2d6c8c;
        }
        .title_txt_bot{
          width: 300px;
          position: absolute;
          font-size: 28px;
          color: #4bc1fe;
          left:80px;
          top:20px;
        }
      }
      .kp_line_con{
        width: 100%;
        height: 361px;
        position: relative;
        //padding-top:30px;
        margin-top:-18px;
        background: url("../images/BG1.png");
        background-size: cover;
        #main3{
          margin:auto;
          width: 95%;
          height: 100%;
        }
        .line_title{
          position: absolute;
          left:50%;
          top:15px;
          -webkit-transform:translate(-50%) ;
          -moz-transform: translate(-50%);
          -ms-transform:translate(-50%) ;
          -o-transform: translate(-50%);
          transform:translate(-50%) ;
          font-size:26px;
          color:#6ff2f7;
        }
      }
      .borrow_num{
        width: 100%;
        margin-top:10px;
        ul{
          width: 100%;
          padding-left:40px;
          li{
            float: left;
            text-align: left;
            color:#fff;
            margin-right: 10px;
            //border: 1px solid red;
            p{
              margin-bottom: 3px;
              color:#3d8a8e;
              //font-size: 18px;
            }
            .borrow_book_num{
              color:#70f5fc;
              font-size: 32px;
            }
            .ce{
              font-size: 14px;
              color:#70f5fc;
            }
          }
        }
      }
    }
  }
  .kp_screen_bottom{
    width: 100%;
    height: 320px;
    //border:1px solid purple;
    .kp_count{
      width: 560px;
      height: 100%;
      float: left;
      margin-right:20px;
      .kp_line_title{
        position: relative;
        width:146px;
        margin-left:40px;
        margin-bottom: 20px;
        img{
          width: 100%;
        }
        .title_txt_top{
          position: absolute;
          width: 300px;
          font-size:6px;
          left:80px;
          top:2px;
          color:#2d6c8c;
        }
        .title_txt_bot{
          width: 300px;
          position: absolute;
          font-size: 28px;
          color: #4bc1fe;
          left:80px;
          top:20px;
        }
      }
      .count_num{
        width: 90%;
        height: 270px;
        margin:-20px 90px 0 20px;
        background: url(../images/count/count_bg.png);
        background-size: cover;
        .count_num_top{
          width: 100%;
          height: 185px;
          padding-top: 10px;
          ul{
            width: 100%;
            height: 100%;
            padding: 5% 8% 1% 6%;
            li{
              float: left;
              width: 30%;
              height: 100%;
              margin-right: 10px;
              .num_left{
                float: left;
                color:#fff;
                font-size:18px;
                text-align: right;
                margin-right: 10px;
                p:nth-of-type(2){
                  color: #4bc1fe;
                }
              }
              .num_right{
                float: right;
                //width: 30%;
                height: 100%;
                position: relative;
                .box2{
                  width: 25px;
                  height: 150px;
                  border:1px solid #818b98;
                  position: relative;
                  margin:auto;
                  .box2_inner{
                    //width: 25px;
                    //height: 150px;
                    width:112%;
                    height:101%;
                    border:1px solid #818b98;
                    position: absolute;
                    top:1px;
                    right:1px;
                    padding-left:12%;
                    padding-bottom:1%;
                  }
                  .box2_inner_inner{
                    //带协条条的背景
                    width: 21px;
                    height: 146px;
                    //width: 100%;
                    //height: 100%;
                    position: absolute;
                    top:2px;
                    left:0;
                    overflow: hidden;
                    background-color: #142f5c;
                    img{
                      position: absolute;
                      left:50%;
                      -webkit-transform:translate(-50%) ;
                    }
                    img:nth-of-type(1){
                      top:72%;
                      //top:1.28rem;
                    }
                    img:nth-of-type(2){
                      //top:51%;
                      top:69%;
                    }
                    img:nth-of-type(3){
                      //top:47%;
                      top:66%;

                    }
                    img:nth-of-type(4){
                      //top:42%;
                      top:63%;
                      left:53%;


                    }
                    img:nth-of-type(5){
                      //top:38%;
                      top:60%;

                    }
                    img:nth-of-type(6){
                      //top:33%;
                      top:57%;
                      left:53%;
                    }
                    img:nth-of-type(7){
                      //top:29%;
                      top:54%;
                    }
                    img:nth-of-type(8){
                      //top:24%;
                      top:51%;
                      left:48%;
                    }
                    img:nth-of-type(9){
                      //top:20%;
                      top:48%;
                    }
                    img:nth-of-type(10){
                      //top:16%;
                      top:45%;

                    }
                    img:nth-of-type(11){
                      //top:11%;
                      top:42%;

                    }
                    img:nth-of-type(12){
                      //top:7%;
                      top:39%;
                      left:53%;

                    }
                    img:nth-of-type(13){
                      //top:3%;
                      top:36%;

                    }
                    img:nth-of-type(14){
                      //top:-2%;
                      top:33%;
                      left:53%;

                    }
                    img:nth-of-type(15){
                      //top:-6%;
                      top:30%;

                    }
                    img:nth-of-type(16){
                      //top:-11%;
                      top:27%;
                      left:48%;
                    }
                    img:nth-of-type(17){
                      //top:-15%;
                      top:24%;
                    }
                    img:nth-of-type(18){
                      //top:-20%;
                      top:21%;

                    }
                    img:nth-of-type(19){
                      //top:-24%;
                      top:18%;
                      left:53%;

                    }
                    img:nth-of-type(20){
                      //top:-29%;
                      top:15%;

                    }
                    img:nth-of-type(21){
                      top:12%;
                    }
                    img:nth-of-type(22){
                      top:9%;
                      left:53%;

                    }
                    img:nth-of-type(23){
                      top:6%;
                    }
                    img:nth-of-type(24){
                      top:3%;
                    }
                    img:nth-of-type(25){
                      top:0%;
                      left:53%;

                    }
                    img:nth-of-type(26){
                      top:-3%;
                    }
                    img:nth-of-type(27){
                      top:-6%;
                      left:53%;

                    }
                    img:nth-of-type(28){
                      top:-9%;
                    }
                    img:nth-of-type(29){
                      top:-12%;
                    }
                    img:nth-of-type(30){
                      top:-15%;
                      left:53%;
                    }
                    img:nth-of-type(31){
                      top:-18%;
                    }
                    img:nth-of-type(32){
                      top:-21%;
                    }
                    img:nth-of-type(33){
                      top:-24%;
                      left:53%;
                    }
                    img:nth-of-type(34){
                      top:-27%;
                    }
                    img:nth-of-type(35){
                      top:-30%;
                    }
                    img:nth-of-type(36){
                      top:-33%;
                    }
                    //img:nth-of-type(37){
                    //  top:-72%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(38){
                    //  top:-75%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(39){
                    //  top:-78%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(40){
                    //  top:-81%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(42){
                    //  top:-84%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(43){
                    //  top:-87%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(44){
                    //  top:-90%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(45){
                    //  top:-93%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(46){
                    //  top:-96%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(47){
                    //  top:-99%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(48){
                    //  top:-102%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(49){
                    //  top:-105%;
                    //  left:-14%;
                    //}
                    //img:nth-of-type(50){
                    //  top:-108%;
                    //  left:-14%;
                    //}
                    //



                  }
                }
              }
            }
          }
        }
        .count_num_bottom{
          width: 83%;
          margin: auto;
          height: 60px;
          color:#1a89c3;
          font-size: 16px;
          padding-top:10px;
          .box{
            width: 100%;
            margin: auto;
            .rectangle_bg{
              width: 100%;
              height: 25px;
              position: relative;
              background-color: #142f5d;
              .rectangle{
                height: 100%;
                width: 100%;
                background-color: #1a89c3;
                line-height: 25px;
                position: absolute;
                top:0;
                left:0;
                padding-left:15px;
                color:#fff;
                text-align: left;
                font-size: 20px;
                .total_ren{
                  font-size: 14px;
                }
              }
            }
          }
        }
      }
    }
    .kp_notice{
      width: 675px;
      height: 310px;
      float: left;
      margin-left: 30px;
      .kp_line_title{
        position: relative;
        width:146px;
        margin-left:40px;
        margin-bottom: 20px;
        img{
          width: 100%;
        }
        .title_txt_top{
          position: absolute;
          width: 300px;
          font-size:6px;
          left:80px;
          top:2px;
          color:#2d6c8c;
        }
        .title_txt_bot{
          width: 300px;
          position: absolute;
          font-size: 28px;
          color: #4bc1fe;
          left:80px;
          top:20px;
        }
      }
      .notice_con{
        width: 100%;
        height: 90%;
        margin-top: -30px;
        background: url(../images/notice.png);
        background-size: cover;
        .notice_con_title{
          width: 100%;
          font-size: 20px;
          font-weight: 700;
          text-align: center;
          padding-top: 20px;
          color: #4bc1fe;
        }
        .notice_con_list{
          width: 90%;
          height: 67%;
          margin:auto;
          margin-top:15px;
            p{
              text-indent:32px;
              padding: 5px 15px 15px 15px;
              font-size:18px;
              color:#57c4fd;
            }
        }
      }
    }
    .kp_recommend{
      width: 490px;
      height: 400px;
      margin-top: -60px;
      margin-left:70px;
      float: left;
      padding: 10px;
      .kp_last_title{
        position: relative;
        float: left;
        width: 70px;
        img{
          width: 100%;
        }
        .txt_last_right{
          position: absolute;
          width: 5px;
          font-size: 10px;
          right:0;
          top:30px;
          color:#2d6c8c;
          -webkit-transform:rotateZ(90deg) ;
          -moz-transform:rotateZ(90deg) ;
          -ms-transform: rotateZ(90deg);
          -o-transform: rotateZ(90deg);
          transform:rotateZ(90deg) ;
        }
        .txt_last_left{
          width: 20px;
          position: absolute;
          font-size: 24px;
          color: #4bc1fe;
          left:50%;
          top:25px;
        }
      }
      .recommend_con{
        float: left;
        width: 372px;
        height: 373px;
        .recommend_con_circle5{
          width: 100%;
          height: 100%;
          position: relative;
          background: url("../images/recommend/circle5.png");
          background-size: cover;
          padding:27px 60px 50px 22px;
          .circle_mother{
            width: 300px;
            height: 300px;
            //border:1px solid red;
            border-radius: 50%;
            position: relative;
            div{
              position: absolute;
              left:50%;
              top:50%;
              -webkit-transform:translate(-50%,-50%) ;
              -moz-transform:translate(-50%,-50%) ;
              -ms-transform:translate(-50%,-50%) ;
              -o-transform:translate(-50%,-50%) ;
              transform:translate(-50%,-50%) ;
            }
            .recommend_con_circle4{
              width: 308px;
              height: 298px;
              background: url("../images/recommend/circle4.png");
              background-size: cover;
            }
            .recommend_con_circle{
              width: 290px;
              height: 290px;
              background: url("../images/recommend/4.png");
              background-size: cover;
            }
            .recommend_con_circle3{
              width:270px;
              height:270px;
              background: url("../images/recommend/circle3.png");
              background-size: cover;
            }
            .recommend_con_circle2{
              width: 240px;
              height: 240px;
              background: url("../images/recommend/circle2.png");
              background-size: cover;
            }
            .recommend_con_circle1{
              width: 226px;
              height: 226px;
              background: url("../images/recommend/circle1.png");
              background-size: cover;
            }
            .recommend_con_book{
              width: 140px;
              img{
                width: 100%;
              }

            }
          }
          .recommend_sao_title{
            position: absolute;
            right:-48px;
            top:55px;
            color: #4bc1fe;
            width: 200px;
            height: 60px;
            text-align: center;
            //border:1px solid red;
            -webkit-transform:rotateZ(45deg) ;
            -moz-transform: rotateZ(45deg);
            -ms-transform:rotateZ(45deg) ;
            -o-transform:rotateZ(45deg) ;
            transform:rotateZ(45deg) ;
            font-size:24px;
            span{
              float: left;
              margin-right:10px;
            }
            .sao_01{
              -webkit-transform:rotateZ(-10deg) ;
              -moz-transform: rotateZ(-10deg);
              -ms-transform:rotateZ(-10deg) ;
              -o-transform:rotateZ(-10deg) ;
              transform:rotateZ(-10deg) ;
            }
            .sao_02{
              -webkit-transform:rotateZ(20deg) ;
              -moz-transform: rotateZ(20deg);
              -ms-transform:rotateZ(20deg) ;
              -o-transform:rotateZ(20deg) ;
              transform:rotateZ(20deg) ;
              //padding-top: -50px;
            }
            .sao_03{
              -webkit-transform:rotateZ(15deg) ;
              -moz-transform: rotateZ(15deg);
              -ms-transform:rotateZ(15deg) ;
              -o-transform:rotateZ(15deg) ;
              transform:rotateZ(15deg) ;
            }
            .sao_04{
              -webkit-transform:rotateZ(25deg) ;
              -moz-transform: rotateZ(25deg);
              -ms-transform:rotateZ(25deg) ;
              -o-transform:rotateZ(25deg) ;
              transform:rotateZ(25deg) ;
              padding-top: 10px;
            }
          }
          .recommend_sao_num{
            position: absolute;
            right:10px;
            bottom:50px;
            color: #4bc1fe;
            text-align: right;
            font-size:16px;
            #two_code{
              font-size:22px;
            }
          }
          .recommend_bot{
            position: absolute;
            left:46%;
            bottom:5px;
            -webkit-transform: translate(-50%);
            -moz-transform: translate(-50%);
            -ms-transform:translate(-50%) ;
            -o-transform:translate(-50%) ;
            transform:translate(-50%);
            font-size:18px;
            color: #4bc1fe;
          }
        }
      }
    }
  }
}